<template>
  <div class="page">
    <div class="detail-tabs">
      <el-tabs v-model="activeTab" @tab-click="tabChange">
        <el-tab-pane label="乘客详情" :name="1"></el-tab-pane>
        <el-tab-pane v-hasPermi="['platuser:record:list']" label="充值记录" :name="2"></el-tab-pane>
        <el-tab-pane v-hasPermi="['bus:platOrderPre:list']" label="乘车记录" :name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="detail-content">
      <user-info
        v-if="activeTab == 1" 
        :user-id="route.params.id"
        @update="getPlatformUserId">
      </user-info>
      <recharge-record 
        v-if="activeTab == 2" 
        :user-id="route.params.id"
        :plat-user-id="platformUserId"
      ></recharge-record>
      <order-record 
        v-if="activeTab == 3" 
        :user-id="route.params.id"
        :plat-user-id="platformUserId"
      ></order-record>
    </div>
  </div>
</template>

<script setup>
import RechargeRecord from './rechargeRecord.vue'
import UserInfo from './userInfo.vue'
import OrderRecord from './orderRecord.vue'

const route = useRoute()
const activeTab = ref(1)
const platformUserId = ref('')

const tabChange = (val) => {
  // console.log(val)
}

const getPlatformUserId = (val) => {
  platformUserId.value = val
}

</script>

<style lang="scss" scoped>
@import '../../../assets/styles/variables.module.scss';

.page {
  padding-top: 1px;
  overflow: hidden;
}

.detail-tabs {
  position: fixed;
  padding-left: 25px;
  margin-left: -10px;
  width: 100%;
  background-color: $main-bg-color;
  z-index: 10;
  margin-top: -11px;
  padding-top: 5px;
}

.detail-content {
  position: relative;
  margin-top: 49px;
  z-index: 1;
}
</style>